<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <base th:href="@{/}">
  <meta charset="utf-8">
  <title>新增</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
  <style type="text/css">
    .layui-form-label {
      white-space: nowrap;
    }
  </style>
</head>
<body class="layui-fluid">
<div class="layui-row">
  <div class="layui-col-md6 layui-col-md-offset3" align="center">
    <form class="layui-form" action="">
      <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
          <label class="layui-form-label">父级菜单</label>
          <div class="layui-input-block">
            <input type="text" id="supperId" th:value="${menuId}" disabled="disabled" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
          <label class="layui-form-label">菜单名称</label>
          <div class="layui-input-block">
            <input type="text" id="menuName" placeholder="请输入" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
          <label class="layui-form-label">接口url</label>
          <div class="layui-input-block">
            <input type="text" id="menuUrl" placeholder="请输入" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
          <label class="layui-form-label">图标</label>
          <div class="layui-input-block">
            <li style="display: inline-block;width: 50px;" id="menu-icon"><i class="layui-icon" id="icon"  style="font-size: 25px;"></i></li>
            <li style="display: inline-block;"><i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon">选择图标</i></li>
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
          <label class="layui-form-label">排序</label>
          <div class="layui-input-block">
            <input type="text" id="orderByIndex" placeholder="请输入" class="layui-input">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript" src="static/plugin/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript">
  layui.use(['form','layer','jquery','table','laydate','upload','element'],function(){
    var form = layui.form,
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.jquery,
            table=layui.table,
            upload = layui.upload,
            laydate =layui.laydate,
            element = layui.element;

    $("#select_icon").click(function(){
      var index = parent.layer.open({
        type: 2
        ,title: "新增"
        ,maxmin: true
        ,area: ['80%', '60%']
        ,content: '/menu/iconHtml'
        ,btn: ['返回']
        ,yes: function(index, layero){
          parent.layer.close(index);
        }
      })
    });
  })
</script>
</body>
</html>